<template>
  <a-breadcrumb>
    <a-breadcrumb-item>系统管理</a-breadcrumb-item>
    <a-breadcrumb-item>文章管理</a-breadcrumb-item>
    <a-breadcrumb-item>{{ optionName + '文章' }}</a-breadcrumb-item>
  </a-breadcrumb>
  <a-form class="main" :model="formArticle" name="basic" autocomplete="off" @finish="onFinish" @finishFailed="onFinishFailed" @submit="handleSubmit">
      <div class="left">
    <a-form-item name="title" class="title" :rules="formArticleRules.title">
      <a-input v-model:value="formArticle.title" placeholder="请输入文章标题" />
    </a-form-item>
        <a-form-item name="content" class="title" :rules="formArticleRules.content">
          <edit v-model:values="formArticle.content"  class="edit" />
        </a-form-item>
        <a-form-item class="btn">
          <a-button  html-type="submit">保存草稿</a-button>
          <a-button type="primary" html-type="submit" flag>发布</a-button>
        </a-form-item>
      </div>
      <div class="right">
        <a-tabs v-model:activeKey="tabsKey">
          <a-tab-pane key="1" tab="选项">
            <div class="title">分类</div>
            <a-form-item
                name="categoryid"
                has-feedback
                :rules="formArticleRules.categoryid"
            >
            <a-select v-model:value="formArticle.categoryid" placeholder="请选择分类">
              <a-select-option v-for="item in CategoryList" :key="item.id" :value="item.id">{{ item.name }}</a-select-option>
            </a-select>
            </a-form-item>
            <div class="title">标签</div>
            <a-form-item name="tagIdList">
              <a-select
                  v-model:value="formArticle.tagIdList"
                  mode="multiple"
                  placeholder="请选择标签"
              >
                <a-select-option v-for="item in TagList" :key="item.id" :value="item.id">{{ item.name }}</a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item name="isTop" label="置顶">
              <a-switch v-model:checked="formArticle.isTop" />
            </a-form-item>
          </a-tab-pane>
          <a-tab-pane key="2" tab="摘要" force-render>
            <a-form-item name="digest" :rules="formArticleRules.digest">
              <a-textarea class="digest" max="200" v-model:value="formArticle.digest" />
            </a-form-item>
          </a-tab-pane>
          <a-tab-pane key="3" tab="Tab 3">Content of Tab Pane 3</a-tab-pane>
        </a-tabs>
      </div>
  </a-form>
</template>

<script setup lang="ts">
import { reactive, ref} from "vue";
import {useRoute,useRouter} from "vue-router";
import Edit from "@/components/admin/edit.vue";
import {message} from "ant-design-vue";
import type { CascaderProps } from 'ant-design-vue';
import getTags from "@/composables/request/tag/getTags";
import getArticleById from "@/composables/request/article/getArticleById";
import {createArticle, getCategoryList, updateArticle} from "@/api/api";
import {Option} from "@/enums/option";
const  route = useRoute()
const  router = useRouter()

const optionName = ref(Option.add);
const routeId = ref(route.params.id);
const isRelease = ref(false);
if(routeId.value == '') {
  optionName.value = Option.add
} else {
  optionName.value = Option.edit
  getArticle(routeId.value);
}

const formArticle = reactive({
  title:"测试文章",
  categoryid: 2,
  tagIdList:[1,2],
  content:"111",
  status: true,
  isTop:false,
  digest:"测试文章摘要",
});
const content = ref("");
const TagList  = ref<CascaderProps['options']>([]);
const CategoryList = ref()
const tabsKey = ref('1')
const formArticleRules = reactive({
  title: [{ required: true, message: '标题不能为空' }],
  content: [{ required: true, message: '内容不能为空' }],
  categoryid:[{ required: true, message: '分类不能为空' }],
  digest:[{type:'string',max:200}]
});
async function getTagList() {
  TagList.value = await getTags();
}
getTagList();
async function getCategory() {
  const res = await getCategoryList
  CategoryList.value = res.data;
}
getCategory();

const onFinish = async (values: any,e:any) => {
  values.isTop = values.isTop ? '1' : '0';
  if (optionName.value === Option.add) {
    values.status = '1'
    await request(createArticle,values);
  }
  if (optionName.value === Option.edit) {
    values.status = isRelease.value ? '1' : '0'
    await request(updateArticle,values,routeId.value);
  }
  isRelease.value = false;
};

async function request(req: any,values:any,id?: any) {
  let  res: any = {};
  if(id != '') {
      res = await req(values,id);
  } else {
      res = await req(values);
  }
  if(res.code == 201 && !isRelease.value) {
    router.push(`/admin/article/write/${res.data}`);
     optionName.value = Option.edit
     routeId.value = res.data;
     return;
  }
  if(res.code == 200 && !isRelease.value) {
    message.success(res.msg)
  }

  if(res.code == 201 || isRelease.value) {
    await router.replace('/admin/article');
    message.success(res.msg)
    return;
  }
}
function handleSubmit(e:any) {
  if(e.submitter.getAttribute("flag") == '') {
    isRelease.value = true;
  }
}
async function getArticle(id: any) {
  const  res: any = await getArticleById(id);
  formArticle.title = res.title;
  formArticle.content = res.content;
  formArticle.digest = res.digest;
  formArticle.categoryid = res.categoryid;
  let tagIdList :any[] = [];
  res.tagList.forEach((item:any)=>{
    tagIdList.push(item.id);
  })
  formArticle.tagIdList = tagIdList;
  formArticle.isTop = res.isTop == "1";
}
const onFinishFailed = (errorInfo: any) => {
  message.error(errorInfo.errorFields[0].errors[0]);
};

</script>

<style lang="less" scoped>
.main {
  display: flex;
  justify-content: space-between;
  margin: 20px 0;
  height: 93%;
  .left {
    flex: 7;
    margin-right: 20px;
    padding: 20px;
    background: white;
    border-radius: 3px;
    box-shadow: 1px 5px 15px rgba(0,0,0,.1);
    .edit {
      height: 62vh;
    }
    .title {
      margin-bottom: 15px;
      input {
        height: 35px;
      }
    }
    .btn {
      display: flex;
      text-align: right;
      button {
        margin-top: 20px;
        margin-left: 20px;
      }
    }
  }
  .right {
    flex: 3;
    background: white;
    box-shadow: 1px 5px 15px rgba(0,0,0,.1);
    padding: 20px;
    .title {
      font-size: 18px;
      color: #333;
      font-weight: 600;
      margin: 20px 0;
    }
    .digest {
      resize: none;
      height: 300px;
    }
  }
}

</style>